<template>
	<div class="view">
		<div class="box">
			<scroll-view scroll-y class="scroll">
				<div class="nav-one-box">
					<div class="nav-one" v-for="(item, index) in menu" :key="index">
						<div class="nav-one-title" @click="getMenuTwo(item, index)" :class="{ active:index==isActive }">
							{{item.departmentName}}
						</div>
					</div>
				</div>
			</scroll-view>
			<scroll-view scroll-y class="scroll" style="background: #FFFFFF;">
				<div class="nav-two-box">
					<div class="nav-two" v-for="(item, index) in menuTwo" :key="index">
						<div class="nav-two-title" @click="getMenuThree(item, index)" :class="{ activeTwo:index==isActiveTwo }">
							{{item.departmentName}}
						</div>
					</div>
				</div>
			</scroll-view>
			<div class="nav-three-box" style="background: #FFFFFF;">
				<div class="nav-three" v-for="(item, index) in menuThree" :key="index" @click='threeClick(item,index)'>
					<div class="nav-three-img">
						<div class="img">
							<image :src="item.departmentImage || '/static/default-avatar.png'" mode="widthFix"></image>
						</div>
						<div class="title">{{item.departmentName}}</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		getMore
	} from "@/apis/request.js";

	export default {
		data() {
			return {
				hospitalId: null,
				menu: [],
				menuTwo: [],
				menuThree: [],
				isActive: -1,
				isActiveTwo: -1
			};
		},
		methods: {
			async getMore() {
				this.menu = await getMore();
			},
			select(department) {
				uni.setStorageSync('departmentId', department.id);
				uni.redirectTo({
					url: '/pages/IndexPages/showDoctor/main?hospitalId=' + this.hospitalId + '&id=' + department.id +
						'&name=' + department.departmentName
				})
			},
			getMenuTwo(item, index) {
				this.menuTwo = [];
				this.menuThree = [];
				this.menuTwo = item.departmentInfoList;
				if (this.menuTwo && this.menuTwo.length > 0) {
					this.isActive = index;
				} else {
					this.select(item);
				}
			},
			getMenuThree(item, index) {
				this.menuThree = [];
				this.menuThree = item.departmentInfoList;
				if (this.menuThree && this.menuThree.length > 0) {
					this.isActiveTwo = index;
				} else {
					this.select(item);
				}
			},
			threeClick(item, index) {
				this.select(item);
			},
			goBack(id) {
				uni.setStorageSync('departmentId', id);
				uni.navigateBack();
			}
		},
		onLoad(options) {
			this.hospitalId = options ? options.hospitalId : null;
			this.getMore();
		}
	};
</script>

<style lang="scss" scoped>
	.view {
		height: 100vh;

		.box {
			width: 100%;
			height: 100vh;
			display: flex;

			.scroll {
				height: 100%;
				width: 25%;

				.nav-one-box,
				.nav-two-box {
					width: 100%;
					height: 100%;
					float: left;

					.nav-one,
					.nav-two {
						height: 90rpx;
						font-size: 28rpx;

						.nav-one-title,
						.nav-two-title {
							min-height: 90rpx;
							line-height: 90rpx;
							background-color: #F1F1F1;
							border-bottom: 1rpx solid #E1E1E1;
							text-align: center;
						}

						.nav-two-title {
							display: flex;
							justify-content: center;
							align-items: center;
							line-height: 60rpx;
							background-color: #F1F1F1;
							border-bottom: 1rpx solid #E1E1E1;
							text-align: center;
						}

						.active,
						.activeTwo {
							background-color: white;
							border-left: 2px solid #32C59A;
							color: #32C59A;
						}
					}
				}
			}
		}

		.nav-three-box {
			width: 48%;
			height: 100%;
			float: right;

			.nav-three {
				.nav-three-img {
					height: 160rpx;
					width: 140rpx;
					float: left;
					margin-right: 40rpx;
					margin-top: 20rpx;
					margin-bottom: 40rpx;
					font-size: 28rpx;

					.img {
						width: 120rpx;
						height: 130rpx;

						image {
							width: 120rpx;
							height: 120rpx;
							margin-left: 8rpx;
						}
					}

					.title {
						height: 60rpx;
						text-align: center;
					}
				}
			}
		}
	}
</style>